<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
  <script>
      // 加载验证码
      function loadCaptcha(){
          $.ajax({
              url:'captchaImage',
              dataType:'json',
              success:function(res){
                  $('#img').attr('src', res.data.img)
                  $('#uuid').val(res.data.uuid)
              }
          })
      }

    $(function(){
        loadCaptcha()
    })

    function doSubmit(){
        $.ajax({
            url: 'captchaCheck',
            data:{
                uuid: $('#uuid').val(),
                code: $('#code').val()
            },
            dataType: 'json',
            success: function(res){
                // console.log(res)
                if(res.status !== 200){
                    // 重新加载验证码
                    loadCaptcha();
                }
            }
        })
    }
  </script>
</head>
<body>
    验证码：
    <input type="text" id="code">
    <img src="" id="img" onclick="loadCaptcha()">
    <input type="hidden" id="uuid">

    <button onclick="doSubmit()">提交</button>
</body>
</html>